<template>
  <div class="unauthorized-page">
    <div class="unauthorized-container">
      <div class="unauthorized-content">
        <div class="error-icon">
          <el-icon size="80"><Lock /></el-icon>
        </div>

        <h1>访问被拒绝</h1>

        <p class="error-message">
          抱歉，您没有权限访问此页面。
        </p>

        <p class="error-description">
          这可能是因为：
        </p>

        <ul class="error-reasons">
          <li>您的账户权限不足</li>
          <li>会话已过期，需要重新登录</li>
          <li>该页面需要特定角色才能访问</li>
        </ul>

        <div class="action-buttons">
          <el-button type="primary" @click="goBack">
            <el-icon><Back /></el-icon>
            返回上页
          </el-button>

          <el-button @click="goHome">
            <el-icon><House /></el-icon>
            回到首页
          </el-button>

          <el-button type="warning" @click="reLogin">
            <el-icon><User /></el-icon>
            重新登录
          </el-button>
        </div>

        <div class="help-section">
          <p>如果问题持续存在，请联系系统管理员：</p>
          <el-button text type="primary" @click="contactAdmin">
            <el-icon><Message /></el-icon>
            联系管理员
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Lock, Back, House, User, Message } from '@element-plus/icons-vue'
import authService from '@/services/AuthService'

const router = useRouter()

const goBack = () => {
  router.go(-1)
}

const goHome = () => {
  router.push('/dashboard')
}

const reLogin = async () => {
  try {
    const result = await authService.logout()
    if (result.success) {
      ElMessage.success('已安全退出')
      router.push('/login')
    }
  } catch (error) {
    console.error('退出失败:', error)
    // 即使退出失败也跳转到登录页
    router.push('/login')
  }
}

const contactAdmin = () => {
  ElMessage.info('请发送邮件至：support@matrixframework.com')
  // 也可以打开邮件客户端
  window.open('mailto:support@matrixframework.com')
}
</script>

<style scoped>
.unauthorized-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem;
}

.unauthorized-container {
  background: white;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  padding: 3rem;
  max-width: 500px;
  text-align: center;
  width: 100%;
}

.unauthorized-content {
  animation: fadeInUp 0.6s ease;
}

.error-icon {
  color: #f56c6c;
  margin-bottom: 2rem;
  animation: pulse 2s infinite;
}

h1 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 1rem;
  font-weight: 600;
}

.error-message {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.error-description {
  font-size: 1rem;
  color: #666;
  margin-bottom: 1rem;
  text-align: left;
}

.error-reasons {
  text-align: left;
  color: #666;
  margin-bottom: 2rem;
  padding-left: 1.5rem;
}

.error-reasons li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.help-section {
  padding-top: 2rem;
  border-top: 1px solid #e9ecef;
  color: #666;
  font-size: 0.9rem;
}

.help-section p {
  margin-bottom: 1rem;
}

/* 动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .unauthorized-page {
    padding: 1rem;
  }

  .unauthorized-container {
    padding: 2rem;
  }

  h1 {
    font-size: 1.5rem;
  }

  .action-buttons {
    flex-direction: column;
    align-items: center;
  }

  .action-buttons .el-button {
    width: 200px;
  }
}
</style>